<template>
  <ul class="download-file">
    <li v-for="file in fileList" :key="file[label]">
      <div class="download-file__name">
        <span>{{ file[label] }}</span>
      </div>
      <div class="download-file__icon">
        <i class="iconfont cp icon-zhankai color-hover-primary"></i>
        <!-- {{ getFileExtension(file[label]) }} -->
      </div>
    </li>
  </ul>
</template>
<script setup>
  import { ref, watch } from "vue"
  const props = defineProps({
    list: {
      type: Array,
      defualt: () => [],
    },
    label: {
      type: String,
      default: "name",
    },
  })

  const fileList = ref([])

  // 文件后缀
  const getFileExtension = (fileName) => (fileName ? fileName.split(".").pop() : null)

  watch(
    () => props.list,
    (val) => {
      fileList.value = val
    },
    {
      immediate: true,
    }
  )
</script>
<style lang="scss" scoped>
  .download-file {
    li {
      display: flex;
      align-items: center;
      height: 28px;
      padding: 0 8px 0 4px;
      cursor: pointer;
      transition: var(--n-transition);
      + li {
        margin-top: 4px;
      }
      &:hover {
        background-color: var(--n-black-hover);
      }
      &:active {
        color: var(--n-primary);
      }
    }
  }
  .download-file__name {
    flex: 1;
    width: 0;
    color: var(--n-primary);
    @include ell();
    span {
      line-height: 1;
      cursor: pointer;
    }
  }
  .download-file__icon {
    width: 20px;
    height: 20px;
    margin-left: 16px;
    cursor: pointer;
  }
</style>
